React的jsx中, 为一个button添加onclick事件，什么时候需要bind(this)

2023-10-15 15:43| 来源: 网络整理| 查看: 265

简介：在react项目中，为一个按钮等添加一个事件，有的地方会用bind(this),本文就分析一下：

什么情况下需要bind(this)？为什么要用bind(this)?可以不用bind(this)吗？

开门见山，先直接给出为一个button添加一个事件的正确写法：

为一个button添加一个onclick事件的正确写法不传参数

// handleClick用定义 onClick = { this.handleClick }

// handleClick用箭头函数定义时，为onClick添加事件应该这么写： // do something here };

或

// handleClick用（普通函数）定义 onClick = { this.handleClick.bind(this) }

// handleClick用普通函数定义时，为onClick添加事件应该这么写： // do something here } 传参数

// handleClick用 /(普通函数) 定义都可以 onClick = { (params) => this.handleClick(params) }

// handleClick可以是箭头函数，也可以是普通函数 Button } from 'antd'; class examplePage extends React.Component { // 2. 定义handleClick事件 handleClick = () => { console.log(this); //3. this指向examplePage } render() { return ( // 1. 为onClick绑定 handleClick事件处理函数 Button } from 'antd'; class examplePage extends React.Component { // 2. !将箭头函数改为普通函数 handleClick () { console.log(this); // 3. this 为 undefined } render() { return ( // 1. 为onClick绑定 handleClick事件处理函数 return ( // 用bind改变this指向 return ( // 通过箭头函数传参 () => this.handleClick() }>

但这是不可行的，因为react会直接解析（）=> this.handleClick(), handleClick会被调用，相当于onClick = “调用handleClick的结果”

所以，不传参数的时候只能这么写：

// do something here }; //为onClick绑定handleClick事件处理函数（param) => this.handleClick(param) }> // 传参

【本文地址】

公司简介

联系我们